<!--
 * @FilePath: OperationItem.vue
 * @@author: wjj
 * @Date: 2025-07-11 14:56:46
 * @@Description: new js file
-->
<template>
  <div
    class="operation-item"
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
  >
    <el-icon><component :is="operation.icon" /></el-icon>
    <span>{{ operation.name }}</span>
  </div>
</template>

<script lang='ts' setup name='filename'>
import { ref, reactive, onMounted, watch, nextTick, defineProps } from 'vue'
//引入用户相关的小仓库
import useUserStore from '@/store/modules/user'
import useSocketClient from '@/store/socket/socket_client'
import emmit from '@/utils/emitter'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
// 挂载完毕
//onMounted(()=>{})
//监控数据
//watch(select, (newVal, oldVal) => {})
const props = defineProps({
  operation: {
    type: Object,
    required: true,
  },
})

const handleDragStart = (e: any) => {
  e.dataTransfer.setData('operation', JSON.stringify(props.operation))
  e.dataTransfer.effectAllowed = 'copy'
  e.target.classList.add('dragging')
}

const handleDragEnd = (e: any) => {
  e.target.classList.remove('dragging')
}
</script>
<style scope lang='scss'>
.operation-item {
  @apply flex items-center p-3 mb-2 bg-white rounded border border-gray-200 
         cursor-move transition-all shadow-sm hover:border-blue-500 hover:shadow-md;
}

.operation-item.dragging {
  @apply bg-blue-100 border-blue-500;
}
</style>